import React ,{useEffect,useState}from 'react';

const App = () => {
    const handleClick = () => {
        // 创建10w条模拟数据
        const data = new Array(20000).fill(0).map((_, index) => ({ id: index, name: `Item ${index}` }));
        let dataLen = data.length
        const dataViewer = document.getElementById('dataViewer'); // 获取数据展示区域元素
        let current = 0; // 开始索引
        let step = 20; // 每次渲染的数据量
        // 一次渲染20条
        const renderFunction = () => {
            const fragment = document.createDocumentFragment(); // 创建文档片段，提高性能
            let end = current + step
            if (end > dataLen) { // 判断是否渲染完毕，如果渲染完毕，则停止递归调用。
                end = dataLen - 1
            }
            const renderData = data.slice(current, end); // 获取当前渲染的数据片段
            current = current + step; // 更新当前索引位置
            renderData.forEach(item => {
                const li = document.createElement('li')
                li.innerHTML = item.name
                fragment.appendChild(li) // 将li元素添加到文档片段中，而不是直接添加到DOM中，减少DOM操作次数。
            })
            dataViewer.appendChild(fragment); // 将文档片段添加到DOM中，一次性渲染多个li元素。
            if (current >= dataLen) { // 判断是否渲染完毕，如果渲染完毕，则停止递归调用。
                return // 渲染完毕，停止递归调用。
            }
            loop() // 递归调用，实现循环渲染
        }
        function loop () {
            requestAnimationFrame(renderFunction)
        }    
        renderFunction()    
    }
    return (
        <div>
            <button onClick={handleClick}>开始</button>
            <ul id='dataViewer'>

            </ul>
        </div>
    );
};

export default App;
